<template>
	<view>
		<view class="u-back-white u-p-30 u-m-t-20">
			<view class="u-flex">
				<view class="u-tag-box u-font-24 u-back-red u-m-r-10 u-p-t-4 u-p-b-4" v-if="data.typename">
					{{data.typename}}</view>
				<view class="u-font-bold">{{data.title}}</view>
			</view>
			<view class="u-flex">
				<view class="tag-box" v-for="item in data.type_label_names" :key="item.name">{{item.name}}</view>
			</view>
			<view class="u-m-t-15">
				<span class="u-color-puce">求助量：</span>
				<span class="u-color-gray">{{data.num}}</span>
			</view>
			<view class="u-m-t-15">
				<span class="u-color-puce">地址：</span>
				<span class="u-color-gray">{{data.address}}</span>
			</view>
			<view class="u-color-gray u-m-t-10" v-html="data.describe"></view>
			<view class="u-m-t-10 u-flex" v-if="data.img[0]">
				<u-image class="u-m-r-15" width="100rpx" height="100rpx" border-radius="10"
					v-for="(imgItem, imgIndex) in data.img" :key="imgIndex" :src="imgItem"
					@click="openViewImage(imgIndex,data.img)"></u-image>
			</view>
			<view class="u-m-t-20 u-color-gray u-font-24 u-flex u-row-between">
				<view class="u-flex">
					<u-icon name="eye-fill" color="#868B9A" size="26"></u-icon>
					<view class="u-m-l-10">{{data.visit}}</view>
				</view>
				<view class="u-flex">
					<view>发布时间：</view>
					<view>{{data.addtime}}</view>
				</view>
			</view>
			<view v-if="data.is_docking == 1 && data.demand_status === '1' && data.is_own == 1">
				<view class="u-flex u-m-t-46 u-row-around">
					<view class="edit-btn" @click="onOperateDemand(data.id,1)">修改</view>
					<view class="cancel-btn" @click="onOperateDemand(data.id,2)">结束</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["data"],
		data() {
			return {
				endDemandBtn: {
					background: "#999999FF",
					border: "none",
					color: "#fff",
					width: "200rpx"
				},
				editDemandBtn: {
					width: "200rpx"
				}
			}
		},
		methods: {
			openViewImage(ind, list) {
				uni.previewImage({
					urls: list,
					current: ind
				})
			},
			onOperateDemand(id,type){
				const params = {
					id: id,
					type: type
				}
				this.$emit("onOperateDemand",params)
			}
		}
	}
</script>

<style scoped>
	.tag-box {
		padding: 5rpx 20rpx;
		font-size: 22rpx;
		border: 1rpx solid #fb6316;
		color: #fb6316;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-right: 10rpx;
	}

	.edit-btn {
		flex: 1;
		background: #fb6316;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.cancel-btn {
		flex: 1;
		background: #999999;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
		margin-left: 40rpx;
	}
</style>